import React, { Component } from 'react';
import { Relax } from 'iflux2';
import noop from 'util/noop';
import { transformURL } from 'util/image';
import { input } from 'antd';
import Material from 'uikit/material';
import Links from 'uikit/links';
import { fromJS } from 'immutable';

@Relax
export default class AdNewsEdit extends Component {

    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            init: true
        }
    }

    static defaultProps = {
        tabs: '',
        status: '',
        curItem: {},
        curIndexInItem: 0,
        _changeNewsValue: noop,
        _addNewsValue: noop,
        _changeBatchNewsValue: noop,
        _setEdited: noop
    }

    render() {

        const { selectedLink } = this.state,
            { curItem, curIndexInItem } = this.props;
        //当前正在编辑的  具体哪一条
        const curEditInfo = curItem.getIn(['articles', curIndexInItem]) || fromJS({});

        return (
            <div className="newsEdit">
                {/** 右侧实时编辑区域 **/}
                <div className="editRight">
                    <div className="editPart" style={{ width: 375 }}>
                        <Links ref="links" onSelect={(e) => { this._setValue('content_source_url', e) }} />
                        <div>链接到</div>
                        <a className="link" onClick={() => { this.refs.links.open({ type: 'custom', data: { url: curEditInfo.get('content_source_url') } }) }}>{curEditInfo.get('content_source_url') || '设置链接到页面地址'}</a>
                    </div>
                    <div className="editPart">
                        <label>标题</label>
                        <br />
                        <input onChange={(event) => { this._setValue('title', event) }} placeholder="请输入标题"
                            type="text" value={curEditInfo.get('title')} maxLength={64} />
                    </div>

                    <div className="editPart">
                        <label>封面<span>（图片建议尺寸900*500像素）</span></label>
                        <br />
                        {
                            curEditInfo.get('thumb_url')
                                ? <div onClick={() => this.refs.material.open('image', { media_id: curEditInfo.get('thumb_media_id'), url: curEditInfo.get('thumb_url') })} className="pic" style={{ backgroundImage: `url(${transformURL(curEditInfo.get('thumb_url'))})` }}></div>
                                : <div onClick={() => this.refs.material.open('image')} className="pic fpic"> + </div>
                        }
                        <Material ref="material" onSelect={(e) => this._setBatchValue({ thumb_media_id: e.media_id, thumb_url: e.url })} />
                    </div>
                    <div className="editPart">
                        <label>摘要</label>
                        <br />
                        <textarea style={{ wordBreak: "break-all" }} value={curEditInfo.get('digest')} onChange={(event) => { this._setValue('digest', event) }} cols="30" rows="10" maxLength={64} resizable={false} />
                    </div>
                </div>
            </div>
        )
    }

    //修改内容
    _setValue = (key, e) => {
        //分两种，一种传值过来，一种从target里取
        let value = e.target && e.target.value;
        if (!value && value !== '') {
            value = e;
        }
        if (key == 'content_source_url') {
            value = e.data.url;
            this.setState({ selectedLink: e });
        }
        const { _changeNewsValue, curIndexInItem, _setEdited } = this.props;
        _changeNewsValue({ index: curIndexInItem, key, value });
        if (this.state.init) this.setState({ init: false });
        else _setEdited(true);
    }

    //批量修改内容
    _setBatchValue = (obj) => {
        const { curIndexInItem, _changeBatchNewsValue } = this.props;
        _changeBatchNewsValue({
            index: curIndexInItem,
            obj
        })
    }

}